<template>
  <el-dialog :visible.sync="visible" title="新增盘点" :close-on-click-modal="false"
    :close-on-press-escape="false">
    <el-form :inline="true" @keyup.enter.native="getInfo()" :model="dataForm" ref="dataForm" class="demo-form-inline">
      <el-form-item label="容器条码">
        <el-input v-model="dataForm.contNo" style="width: 130px" placeholder="请输入容器条码"></el-input>
      </el-form-item>
      <el-form-item label="型材代码">
        <el-input v-model="dataForm.spuNo" style="width: 150px" placeholder="请输入型材代码"></el-input>
      </el-form-item>
      <el-form-item label="型材名称">
        <el-input v-model="dataForm.spuName" style="width: 150px" placeholder="请输入型材名称"></el-input>
      </el-form-item>
      <el-form-item label="当前位置">
        <el-input v-model="dataForm.curPosition" placeholder="请输入当前位置"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table ref="Table" class="checkStock" v-loading="dataListLoading" :data="tableData" border style="width: 100%"
      @select="dataListSelectionChangeHandle">
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column prop="stockId" label="id" header-align="center" align="center"></el-table-column>
      <el-table-column prop="contNo" label="容器条码" header-align="center" align="left"></el-table-column>
      <el-table-column prop="curPosition" label="当前位置" header-align="center" align="left" width="130"></el-table-column>
      <el-table-column prop="spuNo" label="型材代码" header-align="center" align="left" width="100"></el-table-column>
      <el-table-column prop="spuName" label="型材名称" header-align="center" align="left" show-overflow-tooltip width="100"></el-table-column>
      <el-table-column prop="spuSize" label="型材尺寸" header-align="center" align="center">
      </el-table-column>
      <el-table-column prop="stockQty" label="库存" header-align="center" align="center"></el-table-column>
      <el-table-column prop="spuWeight" label="型材磅重" header-align="center" align="center"></el-table-column>
      <el-table-column prop="unitCode" label="单位" header-align="center" align="center">
        
      </el-table-column>
      <el-table-column prop="stockSt" label="库存状态" header-align="center" align="center">
        <template slot-scope="scope">
          {{scope.row.stockSt == 0 ? '空闲' : '预分配'}}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="optionsParams.page" :page-sizes="[10, 20, 50, 100]" :page-size="optionsParams.limit"
      :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
      @current-change="pageCurrentChangeHandle">
    </el-pagination>
    <template slot="footer">
      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
      <el-button type="primary" @click="checkConfirm()">确认盘点</el-button>
    </template>
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
export default {
  data() {
    return {
      dataListLoading: false,
      visible: false,
      spuOptions: [],
      total: 0,
      sel: null,
      dataForm: {
       contNo: '',
       spuNo: '',
       curPosition: '',
       spuName: ''
      },
      optionsParams: {
        page: 1,
        limit: 10
      },
      tableData: [],

    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    init() {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
          this.getInfo()
      })
    },
    // 分页, 当前页
    pageCurrentChangeHandle(val) {
      this.optionsParams.page = val
      this.getInfo()
    },
    pageSizeChangeHandle(val) {
      this.optionsParams.limit = val
      this.getInfo()
    },


    dataListSelectionChangeHandle(selection, row) {
      this.sel = null
      // 清除 所有勾选项
      this.$refs.Table.clearSelection()
      // 当表格数据都没有被勾选的时候 就返回
      // 主要用于将当前勾选的表格状态清除
      if(selection.length == 0) return 
      this.$refs.Table.toggleRowSelection(row, true);
      this.sel = row
    },
    // 获取信息
    getInfo() {
      this.dataListLoading = true
      this.$http.get(`/wms/stock/checkPage`, {
          params: {
            page:  this.optionsParams.page ,
            limit: this.optionsParams.limit,
            ...this.dataForm
          }
        }).then(({ data: res }) => {
        this.dataListLoading = false
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        } else {
          this.tableData = res.data.list
          this.total = res.data.total
        }
       
      }).catch(() => {this.dataListLoading = false })
    },
    // 表单提交
    checkConfirm: debounce(function () {
      if (!this.sel) {
        return this.$message.warning('请先选择需要新增的盘点项！')
      }
      let params = {
        stockId: this.sel.stockId,
        stationNo: '1F_OUT_ST12',
        checkFlag: 0
      }
        this.$http.post('/wms/stock/check', params).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$message({
            message: res.data,
            type: 'success',
            duration: 1000,
            onClose: () => {
              this.visible = false
              this.$emit('refreshDataList')
            }
          })
        }).catch(() => { })
    }, 1000, { 'leading': true, 'trailing': false }),
    search() {
      this.getInfo()
      this.optionsParams.page = 1
    }
  }
}
</script>

<style lang="scss" scoped>
  ::v-deep .el-table__header-wrapper .el-checkbox {
  // display: none;//设置不成功，页面卡顿
  visibility: hidden;
}

::v-deep .el-dialog {
  width: 60%;
}
</style>
